<template>
    <div id='icloud-detail'>
       <!--  <h1 class="card-title">
           <span>iCloud账号详情</span>
       </h1> -->
        
        <loading v-show='loading'></loading>
        <div class="result-info" v-if='!loading'>
            <div class="card-content">
                <div class="sub-title"><span class="title">iCloud账号信息</span></div>
                <ul class="result-info__list">
                    <li class="result-info__item">
                        <div class="result-info__key">账号</div>
                        <div class="result-info__value">{{info.appleId || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码</div>
                        <div class="result-info__value">{{info.applePwd || placeholder}}<span class='new-pwd green' @click='show_modal_icloud = true'> 修改密码</span></div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">出生日期</div>
                        <div class="result-info__value">{{info.bornDay | dateFormat('YYYY-MM-DD')}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题1</div>
                        <div class="result-info__value">{{info.firstQuestion || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题答案1</div>
                        <div class="result-info__value">{{info.firstAnswer || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题2</div>
                        <div class="result-info__value">{{info.secondQuestion || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题答案2</div>
                        <div class="result-info__value">{{info.secondAnswer || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题3</div>
                        <div class="result-info__value">{{info.thirdQuestion || placeholder}}</div>
                    </li>
                    <li class="result-info__item">
                        <div class="result-info__key">密码提示问题答案3</div>
                        <div class="result-info__value">{{info.thirdAnswer || placeholder}}</div>
                    </li>
                </ul>
            </div>

           <!--  <div class="card-content" v-if='info.report && info.report.hasIcould'>
                <div class="sub-title"><span class="title">绑定记录</span></div>

                <div class="table-list">
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>借款期限</th>
                                <th>服务费比例</th>
                                <th>设备</th>
                                <th>额度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='item in limits'>
                                <td>{{ item.cycleDays || placeholder }}天</td>
                                <td>{{ item.serviceCharge | toPercent }}</td>
                                <td>{{ item.deviceModel || placeholder }}</td>
                                <td>{{ item.amount | toYuan }}</td>
                                <td>
                                    <div class='option-box'>
                                        <span class='option-button' @click='showEditLimit(item)'>编辑</span>
                                        <span class='option-button' @click='showDeleteLimit(item)'>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div> -->
        </div>

        <modal 
            title='录入新密码'
            :show='show_modal_icloud' 
            :loading='loading_set_icloud' 
            @close='show_modal_icloud = false'
            @confirm='setIcloudPwd'>
            <div class="modal-form-wrap">
                <ul class="modal-form">
                    <li class='form-item'>
                        <span class="form-item__key">新密码</span>
                        <div class="form-item__value">
                            <input type="text" placeholder='请输入新密码' v-model='icloudPwd'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">确认新密码</span>
                        <div class="form-item__value">
                            <input type="text" placeholder='请再次输入新密码' v-model='icloudRePwd'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { authApplyDetailValidation } from '../validation/validation'
    import Storage from '../utils/storage'
    import { icloudApi, systemApi, loanApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                id:this.$route.params.id,
                placeholder:'--',
                show_modal_reject:false,
                show_modal_icloud:false,
                show_modal_pass:false,
                loading_reject:false,
                loading_icloud:false,
                loading_set_icloud:false,
                loading_pass:false,
                loading:false,
                amount:'',
                recommend:0,
                curItem:{},
                info:{},
                allModels:[],
                deviceModel:{
                    value:'',
                    text:'请选择手机型号'
                },
                icloudPwd:'',
                icloudRePwd:'',
                isSetPwd:'',
                supportCycles:[],
                supportCycle:{
                    value:'',
                    text:'请选择周期'
                },
                imei:'',
                seriaNumber:'',
                rejectReason:'',
                rejectType:'',
                basicStatus:'',
                idCardStatus:'',
                mobileStatus:'',
                contactStatus:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            amountToFen(){
                return (this.amount * 100).toFixed(0)
            },
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            allAuth(){
                let basicPass = this.basicStatus === 0
                let idCardPass = this.idCardStatus === 0
                let mobilePass = this.mobileStatus === 0
                let contactPass = this.contactStatus === 0

                if(basicPass && idCardPass && mobilePass && contactPass) return true

                return false
            },
            basicInfo(){
                return this.info.report && this.info.report.basicInfo || {}
            },
            loanInfo(){
                return this.info.report && this.info.report.loanInfo || {}
            },
            icouldInfo(){
                return this.info.report && this.info.report.icouldInfo || {}
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            userReject(){
                this.rejectType = 'user'
                this.show_modal_reject = true
            },
            reject(){
                this.rejectType = ''
                this.show_modal_reject = true
            },
            getIcloud(){
                this.loading_icloud = true
                loanApi.useICouldAccount({
                    id:this.id
                })
                .then(result=>{

                    this.getInfo()
                    this.loading_icloud = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_icloud = false
                })
            },
            setIcloudPwd(){
                if(!this.icloudPwd){
                    this.setMsgTip({
                        text:'请输入密码',
                        type:'warn'
                    })
                    return
                }
                if(this.icloudPwd != this.icloudRePwd){
                    this.setMsgTip({
                        text:'两次输入的密码不一致',
                        type:'warn'
                    })
                    return
                }
                if(this.icloudPwd == this.info.applePwd){
                    this.setMsgTip({
                        text:'新密码不能与旧密码相同',
                        type:'warn'
                    })
                    return
                }
                this.loading_set_icloud = true
                icloudApi.resetPwd({
                    id:this.id,
                    newPwd:this.icloudPwd
                })
                .then(result=>{
                    this.show_modal_icloud = false
                    this.loading_set_icloud = false
                    this.getDetail()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_set_icloud = false
                })
            },  
            getInfo(){
                this.loading = true
                loanApi.detail({
                    id:this.id
                })
                .then(result=>{
                    this.info = result
                    this.loading = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getCycles(){
                systemApi.allCycles()
                .then(result=>{
                    this.supportCycles = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getDetail(){
                this.loading = true
                icloudApi.detail({
                    id:this.id
                })
                .then(result=>{
                    this.info = result
                    this.loading = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            passHandle(){

                if(!this.amount){
                    this.setMsgTip({
                        text:'请输入放款金额原因',
                        type:'warn'
                    })
                    return
                }
                if(this.supportCycle.value === ''){
                    this.setMsgTip({
                        text:'请选择借款周期',
                        type:'warn'
                    })
                    return
                }
                if(this.seriaNumber === ''){
                    this.setMsgTip({
                        text:'请输入序列号',
                        type:'warn'
                    })
                    return
                }
                if(this.imei === ''){
                    this.setMsgTip({
                        text:'请输入手机IMEI',
                        type:'warn'
                    })
                    return
                }
                if(this.deviceModel.value === ''){
                    this.setMsgTip({
                        text:'请选择手机型号',
                        type:'warn'
                    })
                    return
                }

                this.loading_pass = true
                loanApi.pass({
                    id:this.id,
                    lendAmount:this.amountToFen,
                    cycleId:this.supportCycle.value,
                    seriaNumber:this.seriaNumber,
                    imei:this.imei,
                    deviceModel:this.deviceModel.text,
                })
                .then(result=>{
                    this.loading_pass = false
                    this.show_modal_pass = false
                    this.$router.push({
                        name:'loan-apply-wait'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.loading_pass = false
                })
            },
            rejectHandle(){

                if(!this.rejectReason){
                    this.setMsgTip({
                        text:'请输入审核拒绝原因',
                        type:'warn'
                    })
                    return
                }
                this.loading_reject = true
                if(this.rejectType == 'user'){
                    loanApi.userReject({
                        id:this.id,
                        rejectReason:this.rejectReason,
                    })
                    .then(result=>{
                        this.loading_reject = false
                        this.show_modal_reject = false
                        this.$router.push({
                            name:'loan-apply-wait'
                        })
                    })
                    .catch(error => {
                        console.error(error)
                        this.loading_reject = false
                    })
                    return
                }
                loanApi.reject({
                    id:this.id,
                    rejectReason:this.rejectReason,
                })
                .then(result=>{
                    this.loading_reject = false
                    this.show_modal_reject = false
                    this.$router.push({
                        name:'loan-apply-wait'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.loading_reject = false
                })
            }
        },
        created(){
            this.getDetail()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #icloud-detail{
        .detail-info{
            font-size: 14px;
            line-height: 1.5;
            padding-top:10px;
            color:$importColor;
            p{
                padding-top: 10px;
            }
            span{
                font-weight: normal;
            }
        }
        .new-pwd{
            display: inline-block;
            padding-left: 10px;
        }
    }
</style>
